<!DOCTYPE html>
<html lang="en">

<head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
</head>

<body>
      <div class="container">
            <div class="control">
                  <button>选项1</button>
                  <button>选项2</button>
                  <button>选项3</button>
            </div>
            <div class="content">
                  <div class="box">内容1</div>
                  <div class="box">内容2</div>
                  <div class="box">内容3</div>
            </div>
      </div>

      <!-- <div class="container">
            <div class="control1">
                  <button>选项1</button>
                  <button>选项2</button>
                  <button>选项3</button>
            </div>
            <div class="content">
                  <div class="box1">内容1</div>
                  <div class="box1">内容2</div>
                  <div class="box1">内容3</div>
            </div>
      </div> -->
      <script>
            //获取内容，创建实例对象      
            function Table(btn_selector, content_selector) {
                  //按钮
                  this.btn = document.querySelectorAll(btn_selector)
                  //主体
                  this.contents = document.querySelectorAll(content_selector)
                  //下标
                  this.index = 0
                  //实例对象初始化 
                  this.bindEvent()
                  
            }



            //绑定事件功能
            Table.prototype.bindEvent = function () {
                  //创建变量接收当前点击的按钮
                  this.changebox()
                  var self = this
                  //循环遍历
                  for (var i = 0; i < self.btn.length; i++) {
                        //按钮赋值
                        self.btn[i].index = i
                        //每个按钮的点击事件
                        self.btn[i].onclick = function () {
                              //按钮的下标赋值
                              self.index = this.index
                              //绑定事件功能初始化
                              self.changebox()
                        }

                  }

            }
            //切换功能
            Table.prototype.changebox = function () {
                  //创建变量接收this
                  var self = this;
                  
                  //循环遍历，给对应下标绑定对应按钮下标
                  for (var i = 0; i < self.contents.length; i++) {
                        //全部不出现
                        self.contents[i].style.display="none"
                        //当前菜单出现
                        self.contents[self.index].style.display="block"
                  }

            }
            //构造函数
            var tab01 =new Table(".control button",".box")
      </script>
</body>

</html>